<template>
  <div>
      <div class="city-hread">
          <p class="p1">定位城市</p>
          <div class="hread2"></div>
          <p class="p3">最近访问城市</p>
          <p class="p4">热门城市</p>
          <div class="city-rm">
              <ul>
                  <li><router-link to="/home/reying">上海</router-link></li>
                  <li><router-link to="/home/reying">北京</router-link></li>
                  <li><router-link to="/home/reying">广州</router-link></li>
                  <li><router-link to="/home/reying">深圳</router-link></li>
                  <li><router-link to="/home/reying">武汉</router-link></li>
                  <li><router-link to="/home/reying">天津</router-link></li>
                  <li><router-link to="/home/reying">西安</router-link></li>
                  <li><router-link to="/home/reying">南京</router-link></li>
                  <li><router-link to="/home/reying">杭州</router-link></li>
                  <li><router-link to="/home/reying">成都</router-link></li>
                  <li><router-link to="/home/reying">重庆</router-link></li>
              </ul>
          </div>
      </div>
      <van-index-bar>
      <template v-for="(item, index) in city">
        <van-index-anchor :key="index" :index="item.initial" />
        <van-cell
          v-for="(i, ikey) in item.list"
          :key="index + '-' + ikey"
          :title="i.name"
        />
      </template>
    </van-index-bar>
  </div>
</template>

<script>
import axios from "axios";
export default {
    name:"City",
    data(){
        return{
            city:[]
        }
    },
    mounted(){
        axios.get("city.json").then(rel=>{
            console.log(rel);
            this.city = rel.data.city;
        });
    }
}
</script>

<style scoped>
    .city-hread{
        width:100%;
        background: #f5f5f5;
    }
    .p1,.p3,.p4{
        width:100%;
        height:30px;
        background: #ebebeb;
        line-height: 30px;
        text-indent: 1em;
        font-size: 14px;
        color:#333;
    }
    .hread2{
        width:100%;
        height:60px;
        background: #f5f5f5;
    }
    .p4{
        margin-top:10px;
    }
    .city-rm{
        width:100%;
        background: #f5f5f5;
    }
    .city-rm ul{
        width:100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
    }
    .city-rm ul li{
        width:22%;
        height:30px;
        text-align: center;
        line-height: 30px;
        background: #fff;
        border:1px solid #ccc;
        margin:10px;
        font-size: 14px;
    }
    .city-rm ul li a{
        color:#333;
    }
</style>